﻿<UserControl x:Class="MVVM.Demo.FancyButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:diagnostics="clr-namespace:System.Diagnostics;assembly=WindowsBase"             
    Background="Transparent"
    Height="Auto" Width="Auto">


    <UserControl.Resources>

        <Storyboard x:Key="enterHotspot">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" RepeatBehavior="5" Storyboard.TargetName="rotating1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="360"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" RepeatBehavior="5" Storyboard.TargetName="rotating02" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="720"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="_base" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0.1"/>
                <SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,1" KeyTime="00:00:00.8000000" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="_base" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0.1"/>
                <SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,1" KeyTime="00:00:00.8000000" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="_base2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="1.8"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="_base2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="1.8"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="_base2" Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0.67"/>
                <SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,1" KeyTime="00:00:00.9000000" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="_base3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="1.2"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="_base3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="1.2"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="_base3" Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0.495"/>
                <SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,1" KeyTime="00:00:00.9000000" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" RepeatBehavior="5" Storyboard.TargetName="_base4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0.2"/>
                <SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,1" KeyTime="00:00:01.2000000" Value="0.5"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" RepeatBehavior="5" Storyboard.TargetName="_base4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0.2"/>
                <SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,1" KeyTime="00:00:01.2000000" Value="0.5"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" RepeatBehavior="5" Storyboard.TargetName="_base4" Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>
                <SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,1" KeyTime="00:00:01.2000000" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>






        <ControlTemplate x:Key="hotSpotButtonTemplate" TargetType="{x:Type Button}">
            
            <ControlTemplate.Resources>
                
                <Storyboard x:Key="enter">
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="viewport3D" Storyboard.TargetProperty="(UIElement.Opacity)">
                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <Rotation3DAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Model" Storyboard.TargetProperty="(Model3D.Transform).(Transform3DGroup.Children)[2].(RotateTransform3D.Rotation)">
                        <SplineRotation3DKeyFrame KeyTime="00:00:00">
                            <SplineRotation3DKeyFrame.Value>
                                <AxisAngleRotation3D Angle="180" Axis="-0.707106781186548,-0.707106781186547,4.32963728535968E-17"/>
                            </SplineRotation3DKeyFrame.Value>
                        </SplineRotation3DKeyFrame>
                        <SplineRotation3DKeyFrame KeySpline="0.5,0.5,0.5,1" KeyTime="00:00:00.6000000">
                            <SplineRotation3DKeyFrame.Value>
                                <AxisAngleRotation3D Angle="0" Axis="0,1,0"/>
                            </SplineRotation3DKeyFrame.Value>
                        </SplineRotation3DKeyFrame>
                    </Rotation3DAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="viewport3D" Storyboard.TargetProperty="(UIElement.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid1" Storyboard.TargetProperty="(UIElement.Opacity)">
                        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
                        <SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,1" KeyTime="00:00:00.7000000" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
                
                <Storyboard x:Key="leave">
                    <Rotation3DAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Model" Storyboard.TargetProperty="(Model3D.Transform).(Transform3DGroup.Children)[2].(RotateTransform3D.Rotation)">
                        <SplineRotation3DKeyFrame KeyTime="00:00:00.5000000">
                            <SplineRotation3DKeyFrame.Value>
                                <AxisAngleRotation3D Angle="180" Axis="-0.707106781186548,-0.707106781186547,1.26812140080373E-17"/>
                            </SplineRotation3DKeyFrame.Value>
                        </SplineRotation3DKeyFrame>
                    </Rotation3DAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid1" Storyboard.TargetProperty="(UIElement.Opacity)">
                        <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
                
            </ControlTemplate.Resources>
            
            <Grid Width="350" Height="350">
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Background="#00000000" IsHitTestVisible="False">
                    <Grid Visibility="Visible" x:Name="grid" Background="{x:Null}" IsHitTestVisible="False"/>
                    <Grid Visibility="Hidden" HorizontalAlignment="Left" VerticalAlignment="Top" IsHitTestVisible="False"/>
           
                    <Grid Opacity="0" Margin="50,50,50,50" x:Name="grid1" IsHitTestVisible="False">
                        <Ellipse Opacity="1" Stroke="{x:Null}" HorizontalAlignment="Stretch" Margin="30.56,34.964,30.548,34.971" VerticalAlignment="Stretch" Width="Auto" Height="Auto" IsHitTestVisible="False">
                            <Ellipse.Fill>
                                <LinearGradientBrush EndPoint="0.502,0.518" StartPoint="0.508,0.08">
                                    <GradientStop Color="#E4000000" Offset="0"/>
                                    <GradientStop Color="#00000000" Offset="1"/>
                                    <GradientStop Color="#DB000000" Offset="0.269"/>
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <TextBlock Margin="44.5,60.5,45,0" VerticalAlignment="Top" Width="Auto" Height="36.5" FontFamily="Segoe" FontSize="18" Foreground="#FFFFFFFF" Text="{TemplateBinding Content}" TextAlignment="Center" TextWrapping="Wrap" IsHitTestVisible="False"/>
                    </Grid>
                </Grid>
                <Ellipse x:Name="el" Fill="#00000000" Stroke="{x:Null}" Width="Auto" Height="Auto" Margin="154.5,154.5,154.5,154.5"/>

                <Image x:Name="imageHolder" Width="200" Height ="200"
                   Source="../Images/Search.png"
                   HorizontalAlignment="Center" 
                   VerticalAlignment="Center"/>


            </Grid>
        </ControlTemplate>









    </UserControl.Resources>


    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="btn">
            <BeginStoryboard x:Name="enterHotspot_BeginStoryboard1" 
                             Storyboard="{StaticResource enterHotspot}"/>
        </EventTrigger>
    </UserControl.Triggers>


        
        
    <Grid Grid.Row="0" Margin="0">

        <Grid x:Name="overAnimationGrid" Visibility="Visible" 
          Focusable="True" Opacity="1" Width="350" Height="350" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center" 
          RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                    <SkewTransform AngleX="0" AngleY="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform X="0" Y="0"/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Ellipse x:Name="_base4" StrokeThickness="30" 
                 RenderTransformOrigin="0.5,0.5" Opacity="0.42" 
                 Margin="74.5,74.5,74.5,74.5">
                <Ellipse.Fill>
                    <x:Null/>
                </Ellipse.Fill>
                <Ellipse.Stroke>
                    <SolidColorBrush Color="#FF000000"/>
                </Ellipse.Stroke>
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="0.1" ScaleY="0.1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="0"/>
                        <TranslateTransform X="0" Y="0"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse x:Name="_base3" StrokeThickness="30" 
                 RenderTransformOrigin="0.5,0.5" Opacity="0.42" 
                 Margin="74.5,74.5,74.5,74.5">
                <Ellipse.Fill>
                    <x:Null/>
                </Ellipse.Fill>
                <Ellipse.Stroke>
                    <SolidColorBrush Color="#FF000000"/>
                </Ellipse.Stroke>
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="0.1" ScaleY="0.1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="0"/>
                        <TranslateTransform X="0" Y="0"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse x:Name="_base2" StrokeThickness="20" 
                 RenderTransformOrigin="0.5,0.5" Opacity="0.42" 
                 HorizontalAlignment="Stretch" 
                 Margin="74.5,74.5,74.5,74.5" 
                 VerticalAlignment="Stretch">
                <Ellipse.Fill>
                    <x:Null/>
                </Ellipse.Fill>
                <Ellipse.Stroke>
                    <SolidColorBrush Color="#FF000000"/>
                </Ellipse.Stroke>
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="0.1" ScaleY="0.1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="0"/>
                        <TranslateTransform X="0" Y="0"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Path RenderTransformOrigin="0.427,1.263" Stretch="Fill" 
              Stroke="{x:Null}" StrokeThickness="2" 
              Margin="92.462,59.535,62.961,0" 
              x:Name="rotating1" VerticalAlignment="Top" 
              Height="91.377" 
              Data="F1 M115.4635,-5.2426185E-07 C169.75941,-1.2099841E-14 215.30211,37.477062 227.50447,88.006058 L214.44341,91.376877 C203.72292,46.677723 163.46791,13.505 115.465,13.504997 86.833237,13.504999 60.957897,25.306631 42.477222,44.348923 L32.927307,34.799007 C53.851597,13.312658 83.102882,-7.2115606E-15 115.4635,-5.2426185E-07 z">
                <Path.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="0"/>
                        <TranslateTransform X="0" Y="0"/>
                    </TransformGroup>
                </Path.RenderTransform>
                <Path.Fill>
                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                        <GradientStop Color="#00000000" Offset="0"/>
                        <GradientStop Color="#FF000000" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
            </Path>
            <Ellipse x:Name="_base" Width="201" Height="201" 
                 HorizontalAlignment="Center" Margin="0,0,0,0" 
                 VerticalAlignment="Center" StrokeThickness="3" 
                 RenderTransformOrigin="0.5,0.5">
                <Ellipse.Fill>
                    <RadialGradientBrush>
                        <GradientStop Color="#00000000" Offset="1"/>
                        <GradientStop Color="#8E000000" Offset="0"/>
                    </RadialGradientBrush>
                </Ellipse.Fill>
                <Ellipse.Stroke>
                    <LinearGradientBrush EndPoint="0.002,0.515" 
                                     StartPoint="0.998,0.5">
                        <GradientStop Color="#FF000000" Offset="0"/>
                        <GradientStop Color="#00000000" Offset="0.986"/>
                    </LinearGradientBrush>
                </Ellipse.Stroke>
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="0"/>
                        <TranslateTransform X="0" Y="0"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Path RenderTransformOrigin="0.427,1.263" Stretch="Fill" 
              Stroke="{x:Null}" StrokeThickness="2" 
              x:Name="rotating02" Height="73.562" 
              Data="F1 M115.4635,-5.2426185E-07 C169.75941,-1.2099841E-14 215.30211,37.477062 227.50447,88.006058 L214.44341,91.376877 C203.72292,46.677723 163.46791,13.505 115.465,13.504997 86.833237,13.504999 60.957897,25.306631 42.477222,44.348923 L32.927307,34.799007 C53.851597,13.312658 83.102882,-7.2115606E-15 115.4635,-5.2426185E-07 z" Opacity="0.645" Margin="108.667,82.035,84.69,0" VerticalAlignment="Top">
                <Path.Fill>
                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                        <GradientStop Color="#00000000" Offset="0"/>
                        <GradientStop Color="#FF000000" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
                <Path.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="0"/>
                        <TranslateTransform X="0" Y="0"/>
                    </TransformGroup>
                </Path.RenderTransform>
            </Path>
            <Ellipse Stroke="{x:Null}" x:Name="centerShadow3" 
                 Margin="150.992,150.992,150.985,150.985">
                <Ellipse.Fill>
                    <SolidColorBrush Color="#33000000"/>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Stroke="{x:Null}" x:Name="centerShadow2"  
                 Margin="152.028,152.028,152.025,152.025">
                <Ellipse.Fill>
                    <SolidColorBrush Color="#33000000"/>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Stroke="{x:Null}" x:Name="centerShadow1" 
                 Margin="153.109,153.109,153.108,153.108">
                <Ellipse.Fill>
                    <SolidColorBrush Color="#33000000"/>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Stroke="{x:Null}" HorizontalAlignment="Center" 
                 x:Name="centerBase" VerticalAlignment="Center" Width="41" Height="41">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.488,1.061" 
                                     StartPoint="0.488,0.037">
                        <GradientStop Color="#FF000000" Offset="0"/>
                        <GradientStop Color="#FF000000" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Path Stretch="Fill" Stroke="{x:Null}" 
              Margin="157.402,155.038,156.142,170.068" 
              x:Name="centerReflex" Width="Auto" Height="Auto" 
              RenderTransformOrigin="0.5,0.5">
                <Path.Fill>
                    <LinearGradientBrush EndPoint="0.622,0.834" 
                                     StartPoint="0.462,-0.148">
                        <GradientStop Color="#BC000000" Offset="0"/>
                        <GradientStop Color="#00000000" Offset="0.986"/>
                    </LinearGradientBrush>
                </Path.Fill>
                <Path.Data>
                    <PathGeometry>
                        <PathFigure IsClosed="True" 
                            StartPoint="30.3210918169212,16.8819757980464">
                            <PolyBezierSegment IsSmoothJoin="True" 
                            Points="24.109587,17.81367 25.839185,16.997196 16.521969,15.754796 5.4762738,15.754796 0.96147679,31.512749 0.96147679,20.467054 0.96147679,9.4213589 9.454305,0.5 20.5,0.5 31.545695,0.5 42.282942,14.467202 32.655446,16.33059"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
                <Path.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="13.453"/>
                        <TranslateTransform X="-0.007677338768829145" 
                                        Y="0.093094231573402908"/>
                    </TransformGroup>
                </Path.RenderTransform>
            </Path>
        </Grid>

        <Button x:Name="btn" 
                Template="{DynamicResource hotSpotButtonTemplate}"
            HorizontalAlignment="Center" VerticalAlignment="Center" 
            Width="350" Height="350" 
            RenderTransformOrigin="0.5,0.5" 
            Cursor="Hand" Opacity="1">
            <Button.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                    <SkewTransform AngleX="0" AngleY="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform X="0" Y="0"/>
                </TransformGroup>
            </Button.RenderTransform>


        </Button>



    </Grid>



</UserControl>
